import React from 'react'
import {Outlet,NavLink,useLocation,Link} from "react-router-dom"
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
  } from '@ant-design/icons';
  import { Breadcrumb, Layout, Menu } from 'antd';
  import { useState } from 'react';
  const { Header, Content, Footer, Sider } = Layout;
  const breadcrumbNameMap = {
    '/home': 'HOME',
    '/home/dh1': '导航1',
    '/home/dh2': '导航2',
  };
  
  function getItem(label, key, icon, children) {
    return {
      key,
      icon,
      children,
      label,
    };
  }
  const items = [
    getItem(<NavLink to="/home/dh1">导航1</NavLink>, '1', <PieChartOutlined />), // {}
    getItem('User', 'sub1', <UserOutlined />, [
      getItem(<NavLink to="/home/dh2">导航2</NavLink>, '3'),
   
    ]),
  ];
function Home() {
    const location = useLocation();
    const pathSnippets = location.pathname.split('/').filter((i) => i);
    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
        const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
        return (
          <Breadcrumb.Item key={url}>
            <Link to={url}>{breadcrumbNameMap[url]}</Link>
          </Breadcrumb.Item>
        );
      });
    const [collapsed, setCollapsed] = useState(false);

  return (
    <div>
         <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="logo" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 0,
          }}
        />
        <Content
          style={{
            margin: '0 16px',
          }}
        >
             <Breadcrumb>{extraBreadcrumbItems}</Breadcrumb>

          <div
            className="site-layout-background"
            style={{
              padding: 24,
              minHeight: 360,
            }}
          >
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
       
    </div>
  )
}

export default Home